<script type="text/jsx">
import Vue from "vue";
import FieldRulesInput from "@/components/extraComponents/FieldRulesInput";
import OptionsController from "@/components/extraComponents/OptionsController";
export default Vue.extend({
  name: "CreatePropForm",
  components: { FieldRulesInput, OptionsController },
  props: {
    widgetProps: {
      type: Object,
      default: () => {},
    },
    widgetPropDescribe: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    createItem(field) {
      const value = this.widgetProps[field];
      const { type, options, min, max } = this.widgetPropDescribe[field];
      switch (type) {
        case "input":
          return (
            <el-input
              size="small"
              value={value}
              onInput={this.handleInput.bind(this, field)}
            />
          );
        case "number":
          return (
            <el-input-number
              size="small"
              value={value}
              min={min}
              max={max}
              onInput={this.handleInput.bind(this, field)}
            />
          );
        case "select":
          return (
            <el-select
              size="small"
              value={value}
              onInput={this.handleInput.bind(this, field)}
            >
              {options.map((option) => (
                <el-option label={option} value={option} />
              ))}
            </el-select>
          );
        case "switch":
          return (
            <el-switch
              size="small"
              value={value}
              onChange={this.handleInput.bind(this, field)}
            />
          );
        case "rules":
          return <FieldRulesInput value={value} />;
        case "options":
          return <OptionsController value={value} />;
        default:
          return (
            <el-input
              size="small"
              value={value}
              onInput={this.handleInput.bind(this, field)}
            />
          );
      }
    },
    createFormItem(key) {
      const { name } = this.widgetPropDescribe[key];
      return (
        <el-form-item label={name} label-width="100px">
          {this.createItem(key)}
        </el-form-item>
      );
    },
    createCol() {
      const result = [];
      for (let key in this.widgetProps) {
        result.push(<el-col span={24}>{this.createFormItem(key)}</el-col>);
      }
      return result;
    },
    handleInput(key, value) {
      this.widgetProps[key] = value;
    },
  },
  render() {
    return (
      <el-form inline>
        <el-row>{this.createCol()}</el-row>
      </el-form>
    );
  },
});
</script>